<template>
	<view class="content">
		<view class="header">
			<view class="earnings">
				<text class="num">1260.0</text>
				<text class="text">本月收益(元)</text>
			</view>
			<view class="datas" v-for="item in list">
				<view class="data">
					<text class="num">{{item.num}}</text>
					<text class="text">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="select" style="display: flex;">
			<view class="xiala">本月 <image src="../../../static/iconxia.png" mode=""></image></view>
			<view class="xiala" style="margin-left: 50rpx;">全部分类 <image src="../../../static/iconxia.png" mode=""></image></view>
		</view>
		<view class="cont" v-for="items in datas" >
			<view class="cont_i">
				<view class="cont_left">
					<view class="cont_name">{{items.name}}</view>
					<view class="cont_kind">{{items.kind}}</view>
					<view class="cont_time">{{items.time}}</view>
				</view>
				<view class="cont_right">
					<view style="font-size: 13px;color: #333333;font-weight: bold;" v-if="items.deal">
						{{items.price}}
					</view>
					<view style="font-size: 13px;color: #FE401E;font-weight: bold;" v-else>
						+{{items.price}}
					</view>
					<view style="font-size: 12px; color: #AAAAAA;margin-top: 5px;" v-if="items.deal">
						交易关闭
					</view>
					<view  style="font-size: 12px;color: #FE401E;margin-top:5px ;" v-else>
						等待确认收货
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{num:"12660.0",text:"累计收益(元)"},
					{num:"126",text:"本月订单(单)"},
					{num:"266",text:"总订单量(单)"}
					],
				datas:[
					{"name":"新疆哈密瓜","kind":"水果","time":"今天 12:26","price":"25.00","deal":false},
					{"name":"新疆哈密瓜","kind":"水果","time":"今天 12:26","price":"25.00","deal":false},
					{"name":"什么什么西红柿","kind":"蔬菜","time":"今天 12:26","price":"25.00","deal":true}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.header{
		width: 750rpx;
		height: 322rpx;
		background:#24BC81;
		padding-top: 30rpx;
	}
	.earnings{
		color: #FFFFFF;
		margin: 0 auto;
		text-align: center;
		padding: 5px;
		}
	
	.num{
		font-size: 22px;
		display: block;
	}
	.text{
		font-size: 12px;
	}
	.xiala>image{
		width: 16rpx;
		height: 10rpx;
		margin-left: 10rpx;
	}
	.datas{
		width: 750rpx;
		margin: 10px auto;
	}
	.data{
		float: left;
		color: #FFFFFF;
		font-size: 12px;
		width:150rpx;
		text-align: center;
		margin-left:10%;
	}
	.select{
		background-color: #F9F9F9;
		width: 750rpx;
		height: 46px;
		line-height: 46px;
		padding-left: 10%;
	}
	.cont_i{
		width: 675rpx;
		height:80px;
		margin: 0 auto;
		border-bottom: 1px solid #eee;
		clear: both;
		padding-top: 5%;
	}
	.cont_left{
		width: 337rpx;
		float: left;
	}
	.cont_name{
		font-size: 13px;
		font-weight: bold;
	}
	.cont_right{
		width: 337rpx;
		float: right;
		text-align: right;
	}
	.cont_kind{
		color: #BFBFBF;
		font-size: 12px;
		margin-top: 5px;
	}
	.cont_time{
		font-size: 11px;
		margin-top: 5px;
		color: #BFBFBF;
	}
</style>
